*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 移除列表项默认的符号标记（如圆点、数字等） */
li{
  list-style: none;
}

@font-face {
  font-family: electronicFont;
  src: url("../font/DS-DIGIT.TTF");
}

body{
  background: url("../images/bg.jpg")
  no-repeat top center;
  line-height: 1.15;
  //background-size: cover; // 背景图片铺满屏幕，不管鼠标怎么滚动
  background-repeat: repeat; // 重要：让背景图片重复平铺
}

header{
  position: relative; // 子绝对父相对
  /* 设置头部高度为1.25rem（基于REM单位的自适应高度） */
  height: 2.1rem;
  /* 设置背景图片：使用上级目录images文件夹中的head_bg.png */
  background:url("../images/head_bg.png") no-repeat;
  /* 背景图片尺寸设置为100%宽度和高度，完全覆盖容器 */
  background-size: 100% 100%;

  h1 {
    font-size: 0.60rem;
    color: #ffffff;
    text-align: center;
    line-height: 1rem;
    margin-top: 0.25rem;
  }
  .showTime{
    position: absolute ;
    right: 0.375rem;
    top: 0;
    line-height: 0.9375rem;
    color:rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
  }
}

//页面主体盒子
.mainbox{
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  //background-color: deeppink;
  //padding: 0.125rem 0.125rem  0; // 页面边距

  .column{
    flex: 3;
    &:nth-child(2) {
      flex: 5;
      margin:0 0.125rem 0.1875rem; // 上 左右 下
      overflow: hidden;
    }

    .panel {
      position: relative;
      /* 设置面板高度为3.875rem（基于REM单位的响应式高度） */
      height: 3.875rem;

      /* 设置边框：1像素实线，使用半透明绿色 rgba(25, 186, 139, 0.17) */
      border: 1px solid rgba(25, 186, 139, 0.17);

      /* 设置内边距：左右0.1875rem，底部0.5rem，顶部为0 */
      padding: 0 0.1875rem 0.5rem;

      /* 设置底部外边距：0.1875rem，与其他元素保持间距 */
      margin-bottom: 0.1875rem;

      /* 设置背景：叠加背景图片和半透明白色背景色 */
      background: url("../images/line(1).png") rgba(255, 255, 255, 0.03);

      /* 使用伪元素before创建左上角装饰性边框角 */
      &::before {
        /* 设置绝对定位，相对于父元素定位 */
        position: absolute;

        /* 定位到父元素的左上角 */
        top: 0;
        left: 0;

        /* 设置伪元素尺寸 */
        width: 10px;
        height: 10px;

        /* 绘制左上角边框：左边框和上边框 */
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;

        /* 伪元素必须内容，空字符串表示只显示边框 */
        content: "";
      }

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
        content: "";
      }

      .panel-footer{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
          content: "";
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
          content: "";
        }
      }

      h2 {
        height: 0.6rem;
        color: #ffffff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;
        font-weight: 400;
      }

      .chart{
        height: 3rem;
        //background-color: midnightblue; // 图表后的背景颜色

      }
    }
  }
}

//no 数字模块
.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
  .no-hd{
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17)  ;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
    ul {
      display: flex;
      li {
        position: relative;
        flex: 1;
        line-height: 1rem;
        font-size: 0.35rem;
        color: #ffeb7b;
        text-align: center;
        font-family: "electronicFont", serif;

        &::after {
          content: "";
          position: absolute;
          top: 25%;
          right: 0;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);

        }
      }
    }
  }
  .no-bd{
    ul {
      display: flex;
      li {
        flex: 1;
        text-align: center;
        color: rgba(255, 255, 255, 0.7)  ;
        font-size: 0.25rem;
        height: 0.5rem;
        line-height: 0.5rem;
        padding-top: 0.125rem;
      }
    }
  }
}

/* 地图容器样式 */
.map {
  position: relative; /* 设置为相对定位，作为内部元素的定位参照 */
  height: 10.125rem; /* 设置容器高度 */
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }

  /* 地图图像样式 */
  .map1{
    width: 6.475rem; /* 设置地图宽度 */
    height: 6.475rem; /* 设置地图高度 */
    position: absolute; /* 绝对定位，相对于.map容器 */
    top: 50%; /* 顶部定位到容器垂直中心 */
    left: 50%; /* 左侧定位到容器水平中心 */
    transform: translate(-50%, -50%); /* 通过平移实现完美居中 */
    background: url("../images/map.png"); /* 设置地图背景图片 */
    background-size: 100% 100%; /* 背景图片完全覆盖容器，可能拉伸变形 */
    opacity: 0.3; /* 设置透明度为30%，呈现半透明效果 */
  }

  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.0375rem; /* 设置地图宽度 */
    height: 8.0375rem; /* 设置地图高度 */
    background: url("../images/lbx.png");
    background-size: 100% 100%;
    animation: rotate1 15s linear infinite;
    opacity: 0.6;
  }

  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.075rem;
    height: 7.075rem;
    background: url("../images/jt.png");
    background-size: 100% 100%;
    animation: rotate2 10s infinite linear;
    opacity: 0.6;
  }

  /* 定义旋转动画1 */
  @keyframes rotate1 {
    /* 动画起始状态 */
    from {
      /* 保持居中位置并设置旋转角度为0度 */
      transform: translate(-50%, -50%) rotate(0deg);
    }

    /* 动画结束状态 */
    to {
      /* 保持居中位置并设置旋转角度为360度（完整一圈） */
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  /* 定义旋转动画2 */
  @keyframes rotate2 {
    /* 动画起始状态 */
    from {
      /* 保持居中位置并设置旋转角度为0度 */
      transform: translate(-50%, -50%) rotate(0deg);
    }

    /* 动画结束状态 */
    to {
      /* 保持居中位置并设置旋转角度为360度（完整一圈） */
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

/* %导航容器样式 */
.nav-container {
  display: flex;                /* 使用flex布局 */
  justify-content: center;      /* 水平居中对齐 */
  flex-wrap: wrap;              /* 允许换行 */
  gap: 0.15rem;                    /* 子元素间距12像素 */
  margin-top: 15px;             /* 顶部外边距15像素 */
  padding: 0 20px;              /* 左右内边距20像素 */
}

/* %导航项基础样式 */
.nav-item {
  font-family: "Microsoft YaHei", sans-serif;  // 字体族
  background-color: rgba(30, 60, 114, 0.7); /* 半透明背景色 */
  padding: 0.125rem 0.225rem;           /* 内边距：上下10px，左右18px */
  border-radius: 6px;           /* 圆角边框，半径6像素 */
  cursor: pointer;              /* 鼠标指针变为手型 */
  transition: all 0.3s ease;    /* 所有属性过渡动画，时长0.3秒 */
  border: 1px solid #3a5f9a;    /* 边框样式 */
  color: #bbdefb;               /* 文字颜色 */
  font-weight: 500;             /* 字体粗细 */
  font-size: 0.2rem;
}

/* %导航项悬停效果 */
.nav-item:hover {
  background-color: rgba(56, 107, 201, 0.8); /* 悬停时背景色变化 */
  transform: translateY(-3px);  /* 向上移动3像素 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* %激活状态的导航项样式 */
.nav-item.active {
  background-color: #1976d2;    /* 激活状态背景色 */
  color: white;                 /* 激活状态文字颜色 */
  box-shadow: 0 0 15px rgba(25, 118, 210, 0.7); /* 激活状态发光效果 */
}



/* === 内容区域样式 === */

/* %内容区域容器 */
.content-container {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;            /* 最大宽度1200像素 */
  margin: 0 auto;            /* 上下外边距30px，左右自动（居中） */
  padding: 0.125rem 0.3125rem  0;             /* 左右内边距20像素 */
  //background-color: #382dcd;
  position: relative;           /* 相对定位，作为子元素定位的参照 */
  min-height: 9rem;            /* 最小高度600像素 */
}


/* %内容区块基础样式 */
.content-section {
  //background-color: #70ffb8; /* 半透明背景色 */
  border-radius: 10px;          /* 圆角边框，半径10像素 */
  padding: 0.3125rem;             /* 内边距25像素 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* 阴影效果 */
  border: none; // 各个图表已经有边框了，不再显示大容器的边框
  //border: 1px solid #02a6b5;    /* 边框样式 */
  min-height: 10rem;            /* 最小高度800像素 */
  opacity: 0;                   /* 初始透明度为0（完全透明） */
  position: absolute;           /* 绝对定位 */
  top: 0;                       /* 顶部对齐 */
  left: 0;                      /* 左侧对齐 */
  width: 100%;                  /* 宽度100% */
  height: 0;                    /* 初始高度为0 */
  overflow: hidden;             /* 溢出内容隐藏 */
  transform: none;              /* 无变换效果 */
  transition: opacity 0.3s ease; /* 透明度过渡动画 */
}

/* % 激活状态的内容区块 */
.content-section.active {
  opacity: 1;                   /* 完全不透明 */
  height: auto;                 /* 高度自适应内容 */
  position: relative;           /* 相对定位 */
  overflow: visible;            /* 溢出内容可见 */
}

/* 区块标题样式 */
.section-title {
  color: #4fc3f7;               /* 科技蓝色文字 */
  font-size: 0.35rem;            /* 字体大小1.8rem */
  margin-bottom: 20px;          /* 底部外边距20像素 */
  padding-bottom: 10px;         /* 底部内边距10像素 */
  border-bottom: 1px solid #2a4a7c; /* 底部边框 */
}

/* %图表容器样式 */
.chart-container {
  display: grid;                /* 使用grid布局 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列数 */
  gap: 20px;                    /* 网格间距20像素 */
  margin-top: 20px;             /* 顶部外边距20像素 */
}

/* 单个图表样式 */
.chart-ds {
  background-color: rgba(30, 60, 114, 0.5); /* 半透明背景色 */
  border-radius: 8px;           /* 圆角边框，半径8像素 */
  padding: 15px;                /* 内边距15像素 */
  height: 250px;                /* 固定高度250像素 */
  display: flex;                /* 使用flex布局 */
  flex-direction: column;       /* 垂直排列子元素 */
  justify-content: center;      /* 垂直居中对齐 */
  align-items: center;          /* 水平居中对齐 */
  border: 1px solid #3a5f9a;    /* 边框样式 */
}

/* 图表标题样式 */
.chart-title {
  color: #81d4fa;               /* 浅蓝色文字 */
  margin-bottom: 15px;          /* 底部外边距15像素 */
  font-size: 0.22rem;            /* 字体大小1.2rem */
}

/* 图表占位区域样式 */
.chart-placeholder {
  width: 100%;                  /* 宽度100% */
  height: 180px;                /* 固定高度180像素 */
  background: linear-gradient(45deg, #1a3a6b, #2a4a7c); /* 渐变背景 */
  border-radius: 6px;           /* 圆角边框，半径6像素 */
  display: flex;                /* 使用flex布局 */
  justify-content: center;      /* 水平居中对齐 */
  align-items: center;          /* 垂直居中对齐 */
  color: #bbdefb;               /* 文字颜色 */
  font-size: 0.22rem;            /* 字体大小1.1rem */
}

/* 数据卡片网格布局 */
.data-grid {
  display: grid;                /* 使用grid布局 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自适应列数 */
  gap: 15px;                    /* 网格间距15像素 */
  margin-top: 20px;             /* 顶部外边距20像素 */
  justify-content: center;
  background-color: #f2f0f4;
}

/* 数据卡片样式 */
.data-card {
  background-color: rgba(30, 60, 114, 0.5); /* 半透明背景色 */
  border-radius: 8px;           /* 圆角边框，半径8像素 */
  padding: 15px;                /* 内边距15像素 */
  border: 1px solid #3a5f9a;    /* 边框样式 */
}

/* 数据标题样式 */
.data-title {
  color: #81d4fa;               /* 浅蓝色文字 */
  font-size: 0.2rem;
  margin-bottom: 10px;          /* 底部外边距10像素 */
}

/* 数据值样式 */
.data-value {
  color: #4fc3f7;               /* 科技蓝色文字 */
  font-size: 0.36rem;            /* 字体大小1.8rem */
  font-weight: bold;            /* 字体加粗 */
}

/* 数据单位样式 */
.data-unit {
  color: #bbdefb;               /* 浅蓝色文字 */
  font-size: 0.18rem;            /* 字体大小0.9rem */
  margin-left: 5px;             /* 左侧外边距5像素 */
}


/* 表格容器样式 */
.table-container {
  margin-top: 20px;             /* 顶部外边距20像素 */
  overflow-x: auto;             /* 水平方向溢出时显示滚动条 */
}

/* 表格基础样式 */
table {
  width: 100%;                  /* 宽度100% */
  border-collapse: collapse;    /* 边框合并 */
}

/* 表头和表格单元格样式 */
th, td {
  padding: 12px 15px;           /* 内边距：上下12px，左右15px */
  text-align: left;             /* 文本左对齐 */
  border-bottom: 1px solid #2a4a7c; /* 底部边框 */
  color: #e0e0e0;
  font-size: 0.2rem;
}

/* 表头特殊样式 */
th {
  background-color: rgba(30, 60, 114, 0.7); /* 半透明背景色 */
  color: #4fc3f7;               /* 科技蓝色文字 */
}

/* 表格行悬停效果 */
tr:hover {
  background-color: rgba(56, 107, 201, 0.2); /* 悬停时背景色变化 */
}





/* %页脚样式 */
footer {
  text-align: center;           /* 文本居中对齐 */
  padding: 0.2rem;                /* 内边距20像素 */
  margin-top: 0.375rem;             /* 顶部外边距40像素 */
  color: #81d4fa;               /* 浅蓝色文字 */
  border-top: 1px solid #2a4a7c; /* 顶部边框 */
  font-size: 0.2rem;
}



/* === 响应式设计 - 移动设备适配 === */
@media (max-width: 768px) {
  /* 在屏幕宽度小于768px时应用的样式 */
  .nav-container {
    flex-direction: column;   /* 垂直排列 */
    align-items: center;      /* 居中对齐 */
  }

  .nav-item {
    width: 90%;               /* 宽度90% */
    text-align: center;       /* 文本居中对齐 */
  }

  h1 {
    font-size: 1.8rem;        /* 标题字体大小调整为1.8rem */
  }
}

/* 修复内容区块点击事件问题 */
.content-section {
  position: relative !important;
  display: none;

  &.active {
    display: block;
    position: relative !important;
    z-index: 10;
  }

  // 确保非激活页面不接收点击事件
  &:not(.active) {
    pointer-events: none;
    z-index: 1;
  }
}

/* 特别确保采购分析页面可交互 */
#procurement.active {
  z-index: 100;
  pointer-events: auto;

  .procurement-filter-select,
  .procurement-year-select {
    pointer-events: auto;
    cursor: pointer;
  }
}


